<template>
	<view class="page__bd">
		<view class="hb-bar bg-white">
			<view class="action">编码值</view>
		</view>
		<view class="bg-white padding">
			{{qrConfig.code}}
		</view>
		<view class="hb-bar bg-white">
			<view class="action">通过组件调用</view>
		</view>
		<view class="bg-white vertical-center">
			<hb-qr-code :config="qrConfig"></hb-qr-code>
		</view>
		<view class="hb-bar bg-white solid-bottom margin-top">
			<view class="action">通过js调用</view>
		</view>
		<view class="bg-white vertical-center">
			<canvas canvas-id="canvas" id="canvas" class="canvas" :style="{width:canvasWidth+'px',height:canvasWidth+'px'}"></canvas>
		</view>
	</view>
</template>

<script>
	import hbQrCode from "@/components/hb-qrcode/index"
	import {
		qrCode
	} from "@/utils/libs/qr-bar/index"
	export default {
		name: "qrcode",
		components: {
			hbQrCode
		},
		data() {
			return {
				qrConfig: {
					width: 420,
					height: 420,
					code: "5285388838751"
				},
				canvasWidth: 420
			}
		},
		onReady() {
			let that = this;
			this.canvasWidth = this.convert_length(that.qrConfig.width)
			this.$nextTick(() => {
				qrCode('canvas', that, that.qrConfig.code, that.qrConfig.width, that.qrConfig.height);
			})
		},
		methods: {
			convert_length(length) {
				return Math.round(uni.getSystemInfoSync().windowWidth * length / 750);
			}
		}
	}
</script>

<style>
</style>
